<!DOCTYPE html>
<html lang="zh_CN" xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">

<head>
    <title>商品分析</title>
    <div data-th-replace="layout/head-top"></div>
</head>
<body class="gray-bg">
    <div class="wrapper wrapper-content animated fadeInLeft">
        <div>
            <h4>
                <ol class="breadcrumb">
                    <li>
                        <a href="javascript:void(0)"><i class="fa fa-home"></i> <span>统计</span></a>
                    </li>
                    <li>
                        <strong>商品分析</strong>
                    </li>
                </ol>
            </h4>
        </div>

        <div>

            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>商品概况</h5>
                </div>

                <div class="ibox-content stat-iv-data__wrap stat-data__box">
                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="goods-stat-loading-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->
                    <div class="m-t m-b">
                        <h4 class="m-b"><b>| 商品总数</b></h4>
                        <div class="row m-t pt10">
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">在售商品</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的商品总数量(不包括下架的商品)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="sell-goods-count">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">总商品数</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，平台所有商品总数量"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="goods-sum">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>

                    <div class="m-t m-b pt10 p-t">
                        <h4 class="m-b"><b>| 类型商品</b></h4>
                        <div class="row m-t pt10">
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon2 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">录播课</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的录播课程数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="video-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon2 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">套餐课</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的套餐课数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="package-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon2 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">会员课</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的会员课数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="member-course-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon2 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">专栏课</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的专栏课数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="columns-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon2 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">图书</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的图书数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="sell-book-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>


                    <div class="m-t m-b pt10 p-t">
                        <h4 class="m-b"><b>| 单品课</b></h4>
                        <div class="row m-t pt10">
                            <!--<section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon4 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">音频课</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的音频单品课数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000">1568</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>-->
                            <!--<section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon4 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">视频课</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的视频单品课数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000">569836</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>-->
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon4 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">直播课</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的直播单品课数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="live-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <!--<section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon4 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">图文课</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的图文单品数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000">569836</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>-->
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon4 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">免费直播</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的免费直播单品课数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="sell-course-open-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon4 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">小班课</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为已上架的直播单品课数量(不包括下架的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="small-class-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>

                        </div>
                    </div>



                    <div class="m-t m-b pt10 p-t">
                        <h4 class="m-b"><b>| 社团互动</b></h4>
                        <div class="row m-t pt10">
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon5 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">讲师</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为正常的讲师数量(不包括冻结的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="teacher-count">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon5 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">班级</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为正常的班级数量(不包括停班的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="class-count">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon5 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">话题</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为正常的话题数量(不包括禁用的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="class-topic-count">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon5 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">付费问答</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为正常的付费问答数量(不包括禁用的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="yes-charge-qa-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                            <section class="col-sm-2 system-item-warp goods-data__wrap">
                                <div class="sys-item-ele">
                                    <div class="ibox-title">
                                        <span class="ibox-icon ibox-icon5 text-center pull-left m-r-sm">
                                            <i class="fa fs24 c-fff fa-building-o"></i>
                                        </span>
                                        <h5>
                                            <p>
                                                <span class="fs14 c-4e">免费问答</span>
                                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="当前时间，状态为正常的免费问答数量(不包括禁用的)"><i class="fa fa-exclamation-circle"></i></span>
                                            </p>
                                            <aside class="mt5"><span class="fs20 c-000" id="yes-free-qa-num">--</span></aside>
                                        </h5>
                                    </div>
                                </div>
                            </section>
                        </div>
                    </div>

                </div>

            </div>
        </div>

        <div>
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>商品排行</h5>
                    <div class="pull-right stat-time-filter__wrap">
                        <section class="form-inline">
                            <section class="form-group">
                                <span class="fs14 c-999">时间筛选：</span>
                                <select class="form-control" id="goods-time-type">
                                    <option value="1">今日</option>
                                    <option value="5">昨日</option>
                                    <option value="2" selected="selected">近7天</option>
                                    <option value="3">近30天</option>
                                    <option value="4">自定义</option>
                                </select>
                                <!--今日，近7天，近30天显示格式-->
                                <section class="checkbox ml10 hide time-box">
                                    <span class="fs14 c-333">2018-12-05</span>
                                    <span class="fs14 c-999"> 至 </span>
                                    <span class="fs14 c-333">2018-12-11</span>
                                </section>
                                <!--自定义调用日期控件-->
                                <section class="checkbox m-r hide time-input-box">
                                    <input placeholder="开始时间"
                                           readonly
                                           id="statTimeLaydate"
                                           name="statTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                    <div class="checkbox"><span class="fs12 c-999">至</span></div>
                                    <input placeholder="结束时间"
                                           readonly
                                           id="endTimeLaydate"
                                           name="endTimeLaydate"
                                           class="laydate-icon form-control layer-date" type="text"/>
                                </section>
                            </section>
                        </section>
                    </div>
                </div>

                <div class="ibox-content stat-iv-data__wrap stat-data__box">
                    <!--统计模块公共加载状态 开始-->
                    <div class="stat-loading_wrap hide" id="goods-ranking-box">
                        <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="lds-rolling"><circle cx="50" cy="50" fill="none" ng-attr-stroke="{{config.color}}" ng-attr-stroke-width="{{config.width}}" ng-attr-r="{{config.radius}}" ng-attr-stroke-dasharray="{{config.dasharray}}" stroke="#4487f8" stroke-width="2" r="24" stroke-dasharray="113.09733552923255 39.69911184307752"><animateTransform attributeName="transform" type="rotate" calcMode="linear" values="0 50 50;360 50 50" keyTimes="0;1" dur="1s" begin="0s" repeatCount="indefinite"></animateTransform></circle></svg>
                    </div>
                    <!--统计模块公共加载状态 结束-->

                    <div class="row pt10">
                        <section class="col-sm-6">
                            <h4>
                                <b class="c-4e">访客榜 TOP5 之 商品</b>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，平台内访客数(UV)最高5个商品（商品仅包括音频、视频、套餐、直播、专栏、试卷、图书）"><i class="fa fa-exclamation-circle"></i></span>
                            </h4>
                            <section class="m-t">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th width="60%">商品名称</th>
                                        <th width="20%" class="text-center">访客数</th>
                                        <th width="20%" class="text-center">下单数</th>
                                    </tr>
                                    </thead>
                                    <tbody id="top-fiv-shop-box">

                                    </tbody>
                                </table>
                            </section>
                        </section>
                        <section class="col-sm-6">
                            <h4>
                                <b class="c-4e">支付榜 TOP5 之 付费商品</b>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，平台内付费用户数最多的5个商品（商品仅包括需要付费的音频、视频、直播、套餐、专栏、试卷、图书）"><i class="fa fa-exclamation-circle"></i></span>
                            </h4>
                            <section class="m-t">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th width="60%">商品名称</th>
                                        <th width="20%" class="text-center">下单数</th>
                                        <th width="20%" class="text-center">支付数</th>
                                    </tr>
                                    </thead>
                                    <tbody id="pay-five-shop-box">
                                    </tbody>
                                </table>
                            </section>
                        </section>
                    </div>

                    <div class="row pt10 m-t">
                        <section class="col-sm-6">
                            <h4>
                                <b class="c-4e">学习榜 TOP7 之 专业/科目</b>
                                <span class="ml10 fs14 c-ccc hand" data-container="body" data-html="true" data-toggle="popover" data-trigger="hover" data-placement="top" data-content="筛选时间条件内，平台内学习最多的5个专业/科目（学员的课程学习、考试相关操作统计，学习人次当天IP去重，多日相同IP累加）"><i class="fa fa-exclamation-circle"></i></span>
                            </h4>
                            <section class="m-t">
                                <table class="table table-hover">
                                    <thead>
                                    <tr>
                                        <th width="80%">专业/科目</th>
                                        <th width="20%" class="text-center">学习人次</th>
                                    </tr>
                                    </thead>
                                    <tbody id="subject-stud-rnk-list-box">

                                    </tbody>
                                </table>
                            </section>
                        </section>
                    </div>

                </div>
            </div>
        </div>
    </div>
   <div data-th-replace="layout/head-footer"></div>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/echarts/echarts.min.3.0.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/libs/plugins/layer/laydate/laydate.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/time-utils.js?v={v}(path=${staticPath},v=${v})}"></script>
    <script type="text/javascript" th:src="@{{path}/admin/business/statistics/goods/goods-statistics.js?v={v}(path=${staticPath},v=${v})}"></script>
</body>
</html>
